<template>
    <el-dialog :title="!dataForm.id ? '新建分类' : '编辑分类'" :close-on-click-modal="false" :visible.sync="visible"
        :append-to-body="true" class="SHZY-dialog SHZY-dialog_center" lock-scroll width="600px">
        <el-row :gutter="15" class="">
            <el-form ref="elForm" :model="dataForm" size="small" label-width="100px" label-position="right" :rules="rules">
                <el-col :span="24">
                    <el-form-item label="接口名称" prop="fullName">
                        <el-input v-model='dataForm.fullName' placeholder='请输入' clearable :style='{ "width": "100%" }'
                            maxlength='150'>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="分类" prop="category">
                        <el-radio-group v-model='dataForm.category' size='small'>
                            <el-radio-button v-for="(item, index) in categoryOptions" :key="index" :label="item.id">{{
                                item.fullName }}</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="备注" prop="remark">
                        <el-input v-model='dataForm.remark' placeholder='请输入' show-word-limit :style='{ "width": "100%" }'
                            type='textarea' :autosize='{ "minRows": 4, "maxRows": 4 }' maxlength='500'>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="有效标志" prop="enabledMark">
                        <el-switch v-model='dataForm.enabledMark' :active-value='1' :inactive-value='0'>
                        </el-switch>
                    </el-form-item>
                </el-col>
            </el-form>
        </el-row>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false">取 消</el-button>
            <el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading">确 定</el-button>
        </span>
    </el-dialog>
</template>
  
<script>
import { getInterfaceInfo, createInterface, updateInterface } from '@/api/system/interface/interface'
export default {
    components: {},
    props: [],
    data() {
        return {
            btnLoading: false,
            loading: false,
            visible: false,
            dataForm: {
                id: '',
                fullName: undefined,
                remark: undefined,
                category: "ToExternal",
                enabledMark: 1,
            },
            rules: {
            },
            categoryOptions: [{ 'fullName': "对外", 'id': "ToExternal" }, { 'fullName': "对内", 'id': "ToInternal" }],
        }
    },
    computed: {},
    watch: {},
    created() {
    },
    mounted() {
    },
    methods: {
        goBack() {
            this.$emit('refresh')
        },
        init(id) {
            this.dataForm.id = id || 0;
            this.visible = true;
            this.$nextTick(() => {
                this.$refs['elForm'].resetFields();
                if (this.dataForm.id) {
                    getInterfaceInfo(this.dataForm.id).then(res => {
                        this.dataForm = res.data;
                    })
                }
            });
        },
        dataFormSubmit() {
            this.$refs['elForm'].validate((valid) => {
                if (valid) {
                    this.btnLoading = true;
                    const formMethod = !this.dataForm.id ? createInterface : updateInterface;

                    formMethod(this.dataForm).then((res) => {
                        this.btnLoading = false;
                        this.$message({
                            message: res.msg,
                            type: 'success',
                            duration: 1000,
                            onClose: () => {
                                this.visible = false,
                                    this.$emit('refreshDataList')
                            }
                        })
                    }).catch((res) => {
                        this.btnLoading = false;
                    })
                }
            })
        },
    }
}
</script>
  